<template>
  <div class="lightning-page">
    <div class="menu">
      <MenuItem :index="3"></MenuItem>
    </div>
    <div class="colR">
      <el-row type="flex">
        <el-radio-group v-model="tabPosition">
          <el-radio-button label="推荐"></el-radio-button>
          <el-radio-button label="当月全部"></el-radio-button>
          <el-radio-button label="当月新增"></el-radio-button>
        </el-radio-group>
        <el-button type="text" :icon="Download" :style="{ marginLeft: 'auto' }"
          >下载</el-button
        >
      </el-row>
      <el-form inline :style="{ marginTop: '20px' }">
        <el-row>
          <el-form-item label="平台">
            <el-select
              placeholder="淘宝+天猫"
              :style="{ width: '180px' }"
            ></el-select>
          </el-form-item>
          <el-form-item label="相关类目">
            <el-select v-model="query.c2" multiple :style="{ width: '180px' }">
              <el-option value="饮料" label="饮料"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-radio-group v-model="query.c3">
              <el-radio label="单月">单月</el-radio>
              <el-radio label="过去三个月">过去三个月</el-radio>
            </el-radio-group>
            <el-select
              placeholder="2023-03"
              :style="{ width: '120px', marginLeft: '15px' }"
            ></el-select>
          </el-form-item>
          <el-form-item label="增长率">
            <el-input :style="{ width: '100px' }" placeholder="%"></el-input>
            <div :style="{ padding: '0 8px' }">~</div>
            <el-input :style="{ width: '100px' }" placeholder="%"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="当月销售额">
            <el-input :style="{ width: '80px' }" placeholder="万元"></el-input>
            <div :style="{ padding: '0 8px' }">~</div>
            <el-input :style="{ width: '80px' }" placeholder="万元"></el-input>
          </el-form-item>
          <el-form-item label="去年同期销售额">
            <el-input :style="{ width: '80px' }" placeholder="万元"></el-input>
            <div :style="{ padding: '0 8px' }">~</div>
            <el-input :style="{ width: '80px' }" placeholder="万元"></el-input>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              :style="{ width: '230px' }"
              placeholder="请输入关键字（多个用空格分隔）"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品均价" :style="{ marginRight: '12px' }">
            <el-input :style="{ width: '80px' }" placeholder="元"></el-input>
            <div :style="{ padding: '0 8px' }">~</div>
            <el-input :style="{ width: '80px' }" placeholder="元"></el-input>
          </el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-row>
      </el-form>
      <el-table :data="rows" :header-row-style="{ color: '#333' }">
        <el-table-column label="名称" prop="c1"></el-table-column>
        <el-table-column
          label="当月总销售额"
          prop="c2"
          align="center"
        ></el-table-column>
        <el-table-column
          label="去年同期销售额"
          prop="c3"
          align="center"
        ></el-table-column>
        <el-table-column
          label="同比增长率"
          prop="c4"
          align="center"
        ></el-table-column>
        <el-table-column
          label="商品均价"
          prop="c5"
          align="center"
        ></el-table-column>
        <el-table-column label="商品样本" prop="c6" width="320px">
          <template #default="data">
            <el-row type="flex">
              <el-image
                :src="data.row.c6"
                :style="{ width: '50px', height: '50px' }"
              ></el-image>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" :style="{ marginTop: '12px' }">
        <el-pagination background layout="prev, pager, next" :total="30" />
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Download } from "@element-plus/icons-vue";
import MenuItem from "./menu.vue";
const tabPosition = ref("推荐");
const query = reactive({
  c2: ["饮料"],
  c3: "单月",
});
import img1 from "../../assets/market/p-1.png";
import img2 from "../../assets/market/p-2.png";
import img3 from "../../assets/market/p-3.png";
import img4 from "../../assets/market/p-4.png";
import img5 from "../../assets/market/p-5.png";
import img6 from "../../assets/market/p-6.png";
import img7 from "../../assets/market/p-7.png";
import img8 from "../../assets/market/p-8.png";
import img9 from "../../assets/market/p-9.png";
const rows = reactive([
  {
    c1: "汽水0糖",
    c2: "￥496.01万",
    c3: "￥0.00",
    c4: "∞",
    c5: "￥58.39",
    c6: img1,
  },
  {
    c1: "栀子花",
    c2: "￥279.29万",
    c3: "￥0.00",
    c4: "∞",
    c5: "￥60.45",
    c6: img2,
  },
  {
    c1: "橙子味",
    c2: "￥118.34万",
    c3: "￥0.00",
    c4: "∞",
    c5: "￥61.20",
    c6: img3,
  },
  {
    c1: "鸭屎香",
    c2: "￥189.64万",
    c3: "￥11.01万",
    c4: "1623%",
    c5: "￥49.26",
    c6: img4,
  },
  {
    c1: "燕麦拿铁",
    c2: "￥217.85万",
    c3: "￥13.41万",
    c4: "1525%",
    c5: "￥81.76",
    c6: img5,
  },
  {
    c1: "青提",
    c2: "￥412.76万",
    c3: "￥32.67万",
    c4: "1163%",
    c5: "￥40.33",
    c6: img6,
  },
  {
    c1: "0香精",
    c2: "￥124.30万",
    c3: "￥15.77万",
    c4: "688%",
    c5: "￥51.36",
    c6: img7,
  },
  {
    c1: "橘皮",
    c2: "￥291.26万",
    c3: "￥37.67万",
    c4: "673%",
    c5: "￥61.47",
    c6: img8,
  },
  {
    c1: "人参",
    c2: "￥162.16万",
    c3: "￥28.92万",
    c4: "461%",
    c5: "￥209.78",
    c6: img9,
  },
]);
</script>
<style lang="scss" scoped>
.lightning-page {
  display: flex;
  height: calc(100vh - 60px);
  .menu {
    background-color: #fff;
  }
  .colR {
    margin-left: auto;
    width: 1%;
    flex: 1;
    margin-left: 20px;
    background-color: #fff;
    padding: 20px 20px 0;
    height: calc(100vh - 80px);
    .image {
      width: 50px;
      height: 50px;
      background-color: #eee;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
